<template>
	<view class="shop_Administration">
		<u-navbar title="商品管理" :border-bottom="false"></u-navbar>
		<view class="search"><u-search v-model="keyword" @search="search" @custom="search"></u-search></view>
		<u-tabs :list="list" :current="current" @change="change"></u-tabs>
		<view class="title">全部：共{{ Partotal }}件商品</view>
		<scroll-view class="msg" scroll-y="true" @scrolltolower="lower">
			<view v-for="(item, index) in flowList" class="item" :key="index" @click="shoppingDetails3(item.id)">
				<view class="tips tips2" v-if="item.status === 0">待审核</view>
				<view class="tips tips3" v-if="item.status === 1">通过</view>
				<view class="tips tips1" v-if="item.status === 2">失败</view>
				<view class="t">
					<img :src="item.map_image" alt="" class="img" />
					<view class="warp">
						<view class="name">
							<!-- <view class="b">{{ item.type === 1 ? '实' : '虚' }}</view> -->
							<view class="name_b">{{ item.goods_title }}</view>
						</view>
						<!-- <view class="k">
							<view>已售：{{ item.max_stock - item.sy_stock }}</view>
							<view>库存：{{ item.sy_stock }}</view>
						</view> -->
						<view class="p">￥{{ item.xj_sprice }}</view>
					</view>
				</view>
			</view>
			<view style="padding: 20rpx 0rpx; box-sizing: border-box">
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
			</view>
		</scroll-view>
		<!-- <dragButton @btnClick="editShop"></dragButton> -->
	</view>
</template>

<script>
import dragButton from '../../components/dragButton.vue';
import { selectgoodslist } from '../../libs/axios.js';
export default {
	components: {
		dragButton
	},
	data() {
		return {
			active: 3,
			keyword: '',
			list: [
				{
					name: '全部'
				},
				{
					name: '出售中'
				},
				{
					name: '已下架'
				}
			],
			Partotal: 0,
			current: 0,
			loadStatus: 'loadmore',
			page_num: 1,
			flowList: []
		};
	},
	onShow() {
		this.lower();
	},
	methods: {
		shoppingDetails3(id) {
			uni.navigateTo({
				url: '/pages/shoppingDetails3/shoppingDetails3?id=' + id
			});
		},
		editShop(item, status) {
			if (item) {
				uni.navigateTo({
					url: '/pages/editShop/editShop?item=' + JSON.stringify(item) + '&status=' + status
				});
			} else {
				uni.navigateTo({
					url: '/pages/editShop/editShop'
				});
			}
		},
		async lower() {
			console.log(this.current);
			if (this.loadStatus === 'nomore') {
				return false;
			} else {
				this.loadStatus = 'loading';
			}
			let option = {
				pageIndex: this.page_num,
				pageSize: 10,
				title: this.keyword
			};
			if (this.current == 0) {
			} else if (this.current == 1) {
				option.is_shelf = 1;
			} else if (this.current == 2) {
				option.is_shelf = 0;
			}
			let info = await selectgoodslist(option);
			this.Partotal = info.data.meta.total;
			info.data.list.forEach((item) => {
				this.flowList.push(item);
			});
			if (info.data.list.length === 10) {
				this.page_num += 1;
				this.loadStatus = 'loadmore';
			} else {
				this.loadStatus = 'nomore';
			}
		},
		change(index) {
			this.current = index;
			this.page_num = 1;
			this.loadStatus = 'loadmore';
			this.flowList = [];
			this.lower();
		},
		search() {
			this.page_num = 1;
			this.loadStatus = 'loadmore';
			this.flowList = [];
			this.lower();
		}
	}
};
</script>

<style lang="scss">
.shop_Administration {
	height: 100vh;
	background: rgba(245, 245, 245, 1);
	position: relative;
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.search {
		background: #fff;
		padding: 10rpx 32rpx;
	}
	.title {
		padding: 30rpx 34rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
	.msg {
		height: 65vh;
		overflow-y: scroll;
		.item {
			width: 710rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background: rgba(255, 255, 255, 1);
			margin: 20rpx auto 0 auto;
			position: relative;
			padding: 30rpx 30rpx 0 30rpx;
			.tips {
				width: 74rpx;
				height: 36rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0;
				left: 0;
				border-bottom-right-radius: 10rpx;
			}
			.tips1 {
				background: rgba(255, 67, 73, 1);
			}
			.tips2 {
				background: rgba(255, 102, 26, 1);
			}
			.tips3 {
				background: rgba(25, 190, 107, 1);
			}
			.t {
				display: flex;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid rgba(238, 238, 238, 1);
				.img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
				.warp {
					width: 70%;
					height: 160rpx;
					margin-left: 14rpx;
					position: relative;
					.name {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						.b {
							width: 36rpx;
							height: 36rpx;
							border-radius: 4rpx;
							background: rgba(233, 241, 254, 1);
							font-size: 22rpx;
							font-weight: 500;
							color: rgba(26, 102, 255, 1);
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 10rpx;
						}
						.name_b {
							width: 90%;
							white-space: nowrap; // 强制一行显示
							overflow: hidden; // 超出隐藏
							text-overflow: ellipsis; // 省略号
						}
					}
					.k {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						display: flex;
						justify-content: space-between;
						margin-top: 34rpx;
					}
					.p {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						font-size: 24rpx;
						font-weight: 700;
						color: rgba(255, 0, 0, 1);
					}
				}
			}
			.b_box {
				display: flex;

				.b_item {
					width: 25%;
					padding: 30rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					.img1 {
						width: 24rpx;
						height: 24rpx;
						margin-left: 22rpx;
					}
				}
			}
		}
	}
}
</style>
